<template>
  <div
    class="M-toast"
    :class="{ ms: config.showMask }"
    v-show="config.show"
    v-if="config"
  >
    <div class="mask"></div>
    <div class="con">{{ text }}</div>
  </div>
</template>
<script>
export default {
  props: {
    config: {
      type: Boolean,
      default: {
        show: false,
        showMask: false,
      },
    },
    text: {
      type: String,
      default: "",
    },
    delay: {
      type: Number,
      default: 2000,
    },
  }
};
</script>

<style scoped lang="less">
.M-toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  .mask {
    display: none;
    .con {
      padding: 20/28rem;
      border-radius: 10/28rem;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 1rem;
      max-width: calc(100vw * 0.7);
      text-align: left;
    }
  }
  &.ms {
    width: 100vw;
    height: 100vh;
    .mask {
      width: 100%;
      height: 100%;
      display: block;
    }
    .con {
      position: absolute;
      z-index: 3;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>